import React, { Component } from 'react';
import moment from 'moment';
import CustomForm from '../../../../components/CustomForm';
import { Input, message, DatePicker } from 'antd';
import services from '../../../../services/api';

const { TextArea } = Input;

class NameListAdd extends Component {
  constructor(props) {
    super(props);
    this.state = {
      treeData: [],
      detail: {}
    };
    this.actionType = 'add';
    this.form = null;
    this.api = 'nameListDetail';
  }

  componentWillMount() {
    this.actionType = this.props.actionType;
    if (this.props.actionType) {
      if (this.actionType === 'update') {
        this.name_list_data_id = this.props.record.name_list_data_id;
      }
    }
  }

  handleSubmit = () => {
    this.form.validateFields((err, values) => {
      if (!err) {
        if (moment(values.start_time) >= moment(values.end_time)) {
          message.warning('有效期始必须小于有效期止');
          return;
        }
        const params = {
          data_content: values.data_content,
          start_time: moment(values.start_time).format('YYYY-MM-DD HH:mm:ss'),
          end_time: moment(values.end_time).format('YYYY-MM-DD HH:mm:ss'),
          remark: values.remark,
          status: (this.props.record || {}).status
        };
        if (this.actionType === 'update') {
          params.name_list_data_id = this.name_list_data_id;
        }
        services[this.api][this.actionType](params).then(data => {
          if (data.code === 0) {
            message.success(data.msg);

            if (this.props.closeModal) {
              this.props.closeModal();
            }
          } else {
            message.error(data.msg);
          }
        });
      }
    });
  };

  handleConfirmBlur = e => {
    const { value } = e.target;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  };

  onStartTimeChange = (e, dateString) => {
    const start = e.startOf('day').format('YYYY-MM-DD HH:mm:ss');
    this.form.setFieldsValue({
      start_time: start
    });
  };
  onEndTimeChange = (e, dateString) => {
    const end = e.endOf('day').format('YYYY-MM-DD HH:mm:ss');
    this.form.setFieldsValue({
      end_time: end
    });
  };

  render() {
    const { data_content, start_time, end_time, remark } = this.props.record || {};

    const formItems = [
      {
        label: {
          label: '名单数据',
          className: 'tantuer-form-item2 tantuer-form-item-nowrap'
        },
        name: 'data_content',
        options: {
          initialValue: data_content,
          rules: [{ required: true, message: '请填写名单数据' }]
        },
        component: <Input placeholder='请填写' disabled={this.actionType === 'detail'} />
      },
      {
        label: {
          label: '有效期始',
          className: 'tantuer-form-item2 tantuer-form-item-nowrap'
        },
        name: 'start_time',
        options: {
          initialValue: start_time ? moment(start_time) : start_time,
          rules: [{ required: true, message: '请选择' }]
        },
        component: (
          <DatePicker
            style={{ width: '100%' }}
            placeholder='请选择'
            format={'YYYY-MM-DD HH:mm:ss'}
            showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
          />
        )
      },
      {
        label: {
          label: '有效期止',
          className: 'tantuer-form-item2 tantuer-form-item-nowrap'
        },
        name: 'end_time',
        options: {
          initialValue: end_time ? moment(end_time) : end_time,
          rules: [{ required: true, message: '请选择' }]
        },
        component: (
          <DatePicker
            style={{ width: '100%' }}
            placeholder='请选择'
            format={'YYYY-MM-DD HH:mm:ss'}
            showTime={{
              defaultValue: moment('23:59:59', 'HH:mm:ss')
            }}
          />
        )
      },
      {
        label: {
          label: '描述',
          className: 'tantuer-form-item2 tantuer-form-item-nowrap'
        },
        name: 'remark',
        options: {
          initialValue: remark,
          rules: [
            { max: 256, message: '最长256个字符' }
          ]
        },
        component: <TextArea rows={4} placeholder='请填写' disabled={this.actionType === 'detail'} />
      }
    ];

    return (
      <CustomForm
        {...this.props}
        createForm={ref => (this.form = ref)}
        formItems={formItems}
        onHandleSubmit={this.handleSubmit}
        hideSubmit={this.actionType === 'detail'}
        colNum={1}
        closeModal={() => this.props.closeModal(true)}
      />
    );
  }
}

export default NameListAdd;
